/*
* 阔地教育科技有限公司版权所有（codyy.com/codyy.cn）.
* Copyright (c) 2019, Codyy and/or its affiliates. All rights reserved.
* @Date: 2020.01.02 00:31.
* @Author
* @Description 上图下文 公告 - 组建
**/
<template>
    <div :class="getName">
      <figure class="h-figure" @click="handleRouterClick(figureData)">
        <img :src="figureData.src"/>
        <figcaption>
            <time>{{ figureData.time }}</time>
            <h2 :title="figureData.title">{{ figureData.title }}</h2>
        </figcaption>
      </figure>
    </div>
</template>
<script>

export default {
  name: 'FigureWrite',
  props: {
    figureData: {
      type: Object,
      default: () => {
        return {
          time: 'time',
          title: 'title',
          url: '../../assets/img/zujin1.jpg'
        }
      }
    }
  },
  data () {
    return {
      terminal: '', // 终端类型
    }
  },
  computed: {
    getName(){
      if(this.terminal === 'pc'){
        return ''
      } else {
        return 'h-figure-ph'
      }
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    console.log('this.terminal***', this.terminal)
  },
  mounted () {
  },
  methods: {
    /**
    *@Description
    *@Param
    *@Return 点击跳转路由.
    **/
    handleRouterClick(item){
      this.$router.push({ name: 'detailsPage', params: { id: item.id } })
    },
  }
}
</script>

<style lang="scss" scoped>
  .h-figure {
    width: 300px;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 15px;
    float: left;
    cursor: pointer;
    transition: all 0.5s;
    border: 1px solid #f8f8f8;
    background: #f8f8f8;
    img {
        display: block;
        width: 100%;
        height: 265px;
        margin: 0 auto 10px auto;
    }
    time {
        font-size: 12px;
        color: #666;
    }
    h2 {
        font-size: 14px;
        overflow: hidden;
        margin-top: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333;
        &:hover {
            text-decoration: underline;
        }
    }
    &:hover {
        border-color: #c8c8c8;
        background: #fff;
        box-shadow: 0px 1px 8px rgba(200, 200, 200, .6);
    }
  }
  .el-pagination {
    padding: 20px 0;
    text-align: center;
  }
  /* 移动端 */
  .h-figure-ph{
    .h-figure{
      width: 100%;
      box-sizing: border-box;
       img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 10px auto;
    }
    }
  }
</style>
